<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户</title>
    <!-- 浏览器 拿到 link 标签以后 会再次向服务器 发起请求 -->
    <!-- <link rel="stylesheet" href="./index.css"> -->
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
    margin: 0;
    padding: 0;
}
ul,li {
    list-style-type: none;
}
a{
    text-decoration: none;
}
html,body{
    height: 100%;
}
header{
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    line-height: 60px;
    background-color: #2980B9;
    color: white;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
}
header span{
    margin-right: 10px;
}
main{
    padding-top: 60px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    align-items: stretch;
}
main aside{
    width: 150px;
    background-color: #2980B9;
}
main aside .block{
    padding: 20px 30px;
    color: #ccc;
}
main aside .block span{
    margin-right: 10px;
}
main aside .block.active{
    background-color: #1F618D ;
    color: white;
}

#box{
    flex: 1;
    margin: 30px;
    padding-top: 20px;
}
.searchbox{
    margin-bottom: 20px;
}
.searchbox input{
    outline: none;
    min-width: 300px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding-left: 20px;
    margin-left: 10px;
    margin-right: 20px;
}
.searchbox .search{
    padding: 10px 30px;
    background: #5DB85B;
    color: white;
    border-radius: 10px;
    cursor: pointer;
}
.addbox .add{
    display: inline-block;
    background: #5DB85B;
    padding: 12px 25px;
    color: white;
    border-radius: 10px;
    margin-left: 10px;
    text-align: center;
    cursor: pointer;
}
.addbox .add span:nth-child(1){
    margin-right: 10px;
}

.table{
    width: 900px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.table .table-head{
    overflow: hidden;
}
.table li{
    width: 100px;
    float: left;
    line-height: 40px;
    padding-left: 10px;
    text-align: center;
    font-weight: 1000;
}
.table li:nth-child(1){
    width: 230px;
    text-align: left;
}

.table .table-body .row{
    width: 900px;
    border-top: 2px solid #ccc;
    overflow: hidden;
}
.table .table-body .row li{
    font-weight: normal;
    float: left;
}
.table .table-body .row:hover{
    background-color: #f5f5f5;
}
.table .table-body .row li:nth-child(6){
    color: white;
}
.table .table-body .row li:nth-child(6){
    display: block;
    width: 60px;
    background-color: #5BB75F;
    border-radius: 10px;
    margin-left: 30px;
    margin-top: 5px;
    line-height: 30px;
    text-align: center;
    padding: 0;
}
.table .table-body .row li:nth-child(6).error{
    background-color: red;
}
.table .table-body .row li:nth-child(7){
    width: 70px;
    margin-left: 45px;
    padding: 0;
    margin-top: 4px;
}
.table .table-body .row li:nth-child(7) span{
    margin: 0 8px;
    cursor: pointer;
}
.table .table-body .empty{
    text-align: center;
    margin: 50px;
    color: red;
}
.ope{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ope span{
    margin: 0 10px;
    border: 1px solid #ccc;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
}

/* 遮罩 */
.mask{
    background-color: rgba(0, 0, 0, .3);
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    display: none;
}
.mask .content{
    padding: 30px;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: white;
}
.mask .content .line{
    margin-bottom: 20px;
}
.mask .content .line input{
    height: 40px;
    border: 1px solid #ccc;
    outline: none;
    padding-left: 20px;
}
.mask .content .line:last-ch他ild{
    display: flex;
    justify-content: center;
}
    </style>
</head>
<body>
    <header>
        <span>9466云专题</span>
        <span class="user"><span class="iconfont icon-yonghu"> </span><span class="username">龙猫</span> ( 9466云专题 )</span>
    </header>
    <main>
        <aside>
            <div class="block"><span class="iconfont icon-home"></span>首页</div>
            <div class="block"><span class="iconfont icon-zhuantiguanli"></span>专题</div>
            <div class="block active"><span class="iconfont icon-yonhu"></span>用户</div>
            <div class="block"><span class="iconfont icon-shezhi"></span>设置</div>
            <div class="block"><span class="iconfont icon-xitongrizhi"></span>日志</div>
        </aside>
        <div id="box">
            <div class="searchbox">
                <input type="text" placeholder="搜索用户"><span class="search">搜索</span>
            </div>
            <div class="addbox"><span class="add"><span class="iconfont icon-tianjia"></span>添加用户</span> 
            </div>
            <div class="table">
                <ul class="table-head">
                    <li>邮箱(账户)</li>
                    <li>姓名</li>  
                    <li>电话</li>
                    <li>所属组</li>
                    <li>管理员</li>
                    <li>状态</li>
                    <li>操作</li>
                </ul>
                
                <div class="table-body">
                    <ul class="row">
                        <li>178884773@qq.com</li> 
                        <li>张伟</li>
                        <li>13611129070</li>
                        <li>编辑组</li>
                        <li>是</li>
                        <li>正常</li>
                        <li>
                            <span class="iconfont icon-bianji editicon" id="101"></span>
                            <span class="iconfont icon-shanchu deleteicon" id="101"></span>
                        </li>
                    </ul>
                    <ul class="row">
                        <li>178884773@qq.com</li> 
                        <li>张伟</li>
                        <li>13611129070</li>
                        <li>编辑组</li>
                        <li>是</li>
                        <li>正常</li>
                        <li>
                            <span class="iconfont icon-bianji editicon" id="101"></span>
                            <span class="iconfont icon-shanchu deleteicon" id="101"></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="ope">
                <span class="prev">上一页</span>
                <span class="next">下一页</span>
            </div>
        </div>
    </main>
    <div class="mask">
        <div class="content">
            <div class="line">
                 <label>邮箱</label> <input type="text" placeholder="输入邮箱">
            </div>
            <div class="line">
                 <label>姓名</label> <input type="text" placeholder="输入姓名">
            </div>
            <div class="line">
                 <label>电话</label> <input type="text" placeholder="输入电话">
            </div>
            <div class="line">
                 <input class="add" type="button" value="添加用户">
            </div>
        </div>
    </div>

    <!-- axios.min.js 文件专门用来发送ajax请求的文件, 内部会暴露出一个axios对象 -->
    <script src="./axios.min.js"></script>
    <!-- 自己的js文件 如果想要用axios来发请求, 必须在 axios.min.js 文件之后引入 -->
    <!-- <script src="./index.js"></script> -->

</body>
</html>
<script>
    
//获取搜索按钮
var searchBtn = document.querySelector('.searchbox .search');
//获取输入框
var inputEle = document.querySelector('.searchbox input');

//获取localStorage中存储的用户信息
var userinfo = JSON.parse( localStorage.getItem('userinfo') );
//渲染用户信息到首页
document.querySelector('.username').innerHTML = userinfo.name;

//点击搜索按钮, 发起ajax请求, 传参数给服务器端, 服务器端返回搜索的结果
searchBtn.onclick = ()=>{
    axios.get( '/user/search', { params:{ searchkey: inputEle.value  }  } ).then((res)=>{
        render( res.data.list )
        console.log(res.data);
    })
}

//给table-body绑定点击事件(事件委托)
var tablebody = document.querySelector('.table-body');
tablebody.onclick = (e)=>{
    //e.target.tagName == 'SPAN' 判断是不是 span 标签
    //e.target.classList.contains('icon-shanchu') 判断是不是 包含 icon-shanchu 这个类名
    if( e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu') ){
        //先获取这个删除按钮对应用户的手机号
        //console.log(e.target.dataset.phone);
        //发起 删除请求 , 删除服务器端的这个用户
        axios.post('/user/delete',{ phone: e.target.dataset.phone }).then((res)=>{
            console.log(res.data);
            //如果想要在发请求给服务器,删除成功之后, 同时让页面也看到删除后的效果,有两种方案
            //方案一: 本地删除这个dom节点
            //e.target.parentNode.parentNode.remove();
            //方案二: 让删除接口 返回删除后的新数据, 本地调用render方法重新渲染.
            render(res.data.list)
        })
    }
}

//渲染列表
function render(data){
    var str = ''
    
    str = data.map((item,index)=>{
        return `<ul class="row">
                    <li>${item.email}</li> 
                    <li>${item.name}</li>
                    <li>${item.phone}</li>
                    <li>${item.ingroup}</li>
                    <li>${item.isadmin?'是':'否'}</li>
                    <li class="${item.status?'':'error'}">${item.status?'正常':'异常'}</li>
                    <li>
                        <span class="iconfont icon-bianji editicon" id="101"></span>
                        <span class="iconfont icon-shanchu deleteicon" data-phone="${item.phone}"></span>
                    </li>
                </ul>`
    }).join('')

    if( str == '' ){
        str = '<ul style="text-align:center;color:red">未查询到数据!</ul>'
    }
    document.querySelector('.table .table-body').innerHTML 
    = str ;
}

//axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象
axios.get('/user/list', { params: { page:1,count:2 }  } ).then((res)=>{
    //调用render方法, 传入后端返回的数据 渲染列表
    render( res.data.list );
    console.log(res.data);
})


// axios.put()
// axios.delete()
</script>